<template>
	<!-- 此组件利用html2canvas把代码转化为图片格式 -->
	<view>
		<sp-html2canvas-render domId="render-dom-2" ref="renderRef" @renderOver="renderOver"></sp-html2canvas-render>
		<!-- 主渲染内容 -->
		<view class="render_main" v-if="showHaiBao">
			<view id="render-dom-2" class="render_content" >
				<img :src="webImageBase"  />
				<text>{{datas.notice}}</text>
				<view class="render_tit">
					<image  class="avatars" :src="datas.avatar" mode="aspectFill"></image >
					<view class="render_detail">
						<text>{{datas.phone}}</text>
						<text>邀请你加入</text>
					</view>
					<img  class="ewmImg"  :src="locImageBase" mode="aspectFill"></img >
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {urlToBase64,pathToBase64} from '../uni_modules/sp-html2canvas-render/components/sp-html2canvas-render/util.js'
	
	export default {
		name: "datas",
		props: {
		    datas: {
		      type: Object, 
		      required: true 
		    }
		  },
		data() {
			return {
				showHaiBao:true,
				reviewBaseImg: '',
				webImageBase: '',
				locImageBase: '',
				ewmimg:'',
				sharebg:""
			};
		},
		created() {
			console.log(33333);
			let that = this;
			setTimeout(function() {
				that.ewmimg = uni.getStorageSync('ewmimg');
				that.sharebg=uni.getStorageSync("sharebg")
				console.log(that.sharebg);
				that.handleImage()
			}, 500);
		},
		mounted() {
			
		},
		methods:{
			handleImage() {
				console.log();
				/**
				 * 使用urlToBase64或pathToBase64将图片转换为base64格式，
				 * 若图片不支持跨域则可能会报toDataURL on HTMLCanvasElement的错
				 * 在hbuilderx内置浏览器中可能不会跨域，因为内置浏览器解除了跨域限制
				 * 终极大法是将网络图片通过工具转换为base64保存至文件中再放入image标签里
				 */
				
				urlToBase64(this.sharebg).then((res) => {
					// console.log(res);
					this.webImageBase = res
				})
				urlToBase64(this.ewmimg).then((res) => {
					// console.log(res);
					this.locImageBase = res
				})
			},
			renderOver(e) {
				// console.log(e);
				this.reviewBaseImg = e
				 this.$emit('clickHaibao',this.reviewBaseImg);
			},
			cusRenderDom() {
				this.$refs.renderRef.h2cRenderDom()
				// this.$nextTick(()=>{
				// 	this.showHaiBao = false
				// })
			},
		}
	}
</script>

<style scoped>
	.render_main {
		overflow: auto;
		background:#E0DDDA;
		padding-bottom: 30rpx;
		border-radius: 0 0 20rpx 20rpx;
		border-radius: 20rpx;
	}

	.render_content {
		width: 100%;
		color: #333333;
		background:#E0DDDA;
		overflow: auto;
	}
	.render_content>image{
		width: 750rpx;
		height: 750rpx;
	}
	.render_content>img{
		width: 100%;
		height:800rpx;
		object-fit: cover;
	}
	.render_content>text{
		margin: 20rpx 36rpx;
		text-overflow:ellipsis;
		display:-webkit-box;
		-webkit-box-orient:vertical; 
		-webkit-line-clamp:2; 
		overflow:hidden; 
	}

	.curpage-review {
		width: 100%;
		display: flex;
		justify-content: center;
		padding-bottom: 30rpx;
		border-radius: 0 0 20rpx 20rpx;
		/* background:#28264A; */
	}
	.render_tit {
		width: 100%;
		padding: 0 36rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.render_detail {
		display: flex;
		flex-direction: column;
		margin-right: 220rpx;
	}  

	.avatars {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}
	.ewmImg {
		width: 150rpx;
		height: 150rpx;
	}
</style>